<!--
*@description 商户分账
*@fileName merchant-bill.vue
*@author wxl
*@date 2025/02/15 17:29:11
!-->
<template>
  <div class="vue-box cdf">
    <div class="search-card">
      <div class="title">分账列表</div>
      <div class="search-body">
        <el-form :inline="true" :model="formData">
          <el-form-item label="充值时间">
            <el-date-picker type="daterange" v-model="formData.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="统付公司名称">
            <el-input v-model="formData.CreditCompany" placeholder="请输入" />
          </el-form-item> -->
          <el-form-item label="用户姓名">
            <el-input v-model="formData.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="primary" @click="onSearch">搜索</el-button>
            <!-- <el-button class="btn" type="primary" plain @click="onSearch">导出</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="c-card flex1 table-box">
      <div class="table-top">
        <div>
          <span class="margin-right">充值金额汇总：<span class="c-price text-bold">￥{{pagin.EnterpriseFundAmountTotal}}元</span> </span>   
          <span>已使用金额汇总：<span class="c-price text-bold">￥{{pagin.EnterpriseFundPayTotal}}元</span></span></div>
        <div>截至时间：{{ pagin.server_time || '-' }}</div>
      </div>
      <div class="table-body">
        <el-table :data="tableData" stripe style="width: 100%; height: 100%">
          <!-- 第一列显示序号 -->
          <el-table-column label="序号" type="index" width="55"></el-table-column>
          <el-table-column v-for="(item, index) in tableCfg" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
            <template #default="scope">
              <span v-if="item.prop === 'date'">{{ scope.row.Year + '-' + scope.row.Month}}</span>
              <span>
                {{ item.formatter ? item.formatter(scope.row[item.prop]) : scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagin
        :page-no="pagin.pageNo"
        :page-size="pagin.pageSize"
        :total="pagin.total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      />
    </div>
  </div>
</template>
<script setup name="goods-list">
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import tablePagin from '@/sa-frame/com/pagin/table-pagin.vue'
import dicts from '@/utils/dict'

const router = useRouter()
const formData = reactive({
  SharingStatus: '',
})
const pagin = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  server_time: '',
  EnterpriseFundAmountTotal: '',
  EnterpriseFundPayTotal: '',
})

const tableCfg = ref([

  // {
  //   label: '企业基金编号',
  //   prop: 'EnterpriseFundNo',
  // },
  {
    label: '所属公司',
    prop: 'CreditCompany',
    width: '180px'
  },
  {
    label: '公司所在区域',
    prop: 'xxx',
    width: '120px'
  },
  {
    label: '用户姓名',
    prop: 'name',
  },
  {
    label: '证件号码',
    prop: 'id_card_no',
    width: '180px'
  },
  {
    label: '手机号码',
    prop: 'phone',
    width: '120px'
  },
  {
    label: '充值金额',
    prop: 'EnterpriseFundAmount',
  },
  {
    label: '已使用金额',
    prop: 'EnterpriseFundPay',
  },
  {
    label: '充值时间',
    prop: 'RechargeTime',
    width: '160px'
  },
  {
    label: '过期时间',
    prop: 'ExpirationDate',
    width: '160px'
  },
  {
    label: '状态',
    prop: 'Status',
    formatter: (value) => {
      return dicts.enterpriseStatus.find((item) => item.value === value).label
    },
  },
])

const tableData = ref([])

// 组件加载时触发
onMounted(() => {
  f5()
})

// 搜索
function onSearch() {
  pagin.pageNo = 1
  f5()
}

// ------------------ 查找数据 ------------------
const f5 = function () {
  let params = {
    pageindex: pagin.pageNo - 1,
    pagesize: pagin.pageSize,
    ...formData,
    begintime: formData.date ? formData.date[0]: '',
    endtime: formData.date ? formData.date[1] : ''
  }
  sa.ajax('/api/fund/enterpriseFundList', params, function (res) {
    tableData.value = res.data // 数据
    pagin.total = Number(res.totalItems)
    pagin.server_time = res.server_time
    pagin.EnterpriseFundAmountTotal = res.EnterpriseFundAmountTotal
    pagin.EnterpriseFundPayTotal = res.EnterpriseFundPayTotal
  })
}
// 表格页码切换
function handleCurrentChange(pageNo) {
  pagin.pageNo = pageNo
  console.log(' pagin.pageNo', pagin.pageNo)
  f5()
}
// 表格size修改
function handleSizeChange(pageSize) {
  pagin.pageSize = pageSize
  f5()
}
// 申请分账
function applyShare(row) {
  console.log(row)
}
// 报销明细
function claimDetail(row) {
  console.log(row)
}
// 对外开放函数
defineExpose({ f5 })
</script>
<style lang="scss" scoped></style>
